/**
 * zhx calendar base frame scss
 *
 * Author : Vicco Wang
 * Date : 2016.10.13
 * 
 */
@import 'zhx-common-style';

.zhx-cal-wrapper{
	height:100%;
	margin:5px;
	@include use-flex;
	@include flex-column;
	@include no-select;
	border: 1px solid darken( $lightBaseColor , 10% );
	border-radius:5px;
	position:relative;

	.zhx-cal-header{
		height:50px;
		position:relative;
		@include use-flex;
		background-color : $greenColor;
		color : lighten( $lightBaseColor, 100% );

		.zhx-cal-header-date{
			@include use-flex;
			-webkit-align-items: center;
			align-items: center;
			flex:1;
			padding-left: 15px;
			font-size:1.5em;
			font-weight:600;	
		}
		.zhx-cal-header-ctrl{
			width:210px;
			@include no-select;
			@include use-flex;
			@include flex-align-center;

			div{
				@include use-flex;
				@include flex-align-center;
				height:100%;
				padding: 0 15px;
				cursor:default;


				&.zhx-cal-ctrl-prev,&.zhx-cal-ctrl-next {
					font-size:2em;
				}

				&:hover{
					background-color: lighten( $greenColor, 2% );
				}
			}

		}

	}

	.zhx-cal-day-name{
		height: 35px;
		font-size:.9em;
		color : lighten( $baseColor , 20% );
		background-color: darken( $lightBaseColor , 2% );
		border-top:1px solid darken( $lightBaseColor , 10% );
		border-bottom:1px solid darken( $lightBaseColor , 10% );

		ul {
			height:100%;
			@include use-flex;
			// color : lighten( $lightBaseColor, 100% );
			li{
				@include use-flex;
				-webkit-align-items: center;
				-webkit-justify-content: flex-end;
				align-items: center;
				justify-content: flex-end;
				padding-right:10px;
				// border-right:1px solid darken( $lightBaseColor , 15% );
				width: calc( 100% / 7 );
			}

		}

	}

	.zhx-cal-body{
		flex:1;
		@include use-flex;
		@include flex-column;
		>ul {
			width:100%;
			height: calc( 100% / 6 );
			@include use-flex;

			>li{
				position:relative;
				width: calc( 100% / 7 );
				border-right:1px solid darken( $lightBaseColor , 10% );
				border-bottom:1px solid darken( $lightBaseColor , 10% );

				> div {
					@include use-flex;
					height:100%;
					overflow: hidden;

					span.day-number{
						@include use-flex;
						position:absolute;
						font-size:1em;
						color: lighten( $baseColor , 20% );
						right:10px;top:10px;

						span.day-holiday, span.day-workday{
							position:relative;
							top:-1px;right:-4px;
							margin-right:6px;
							font-size:.8em;
							border-radius:5px;
							padding:1px 3px;
							// opacity:.7;
						}

						span.day-holiday{
							border: 1px solid $greenColor;
							color : $greenColor;
						}
						span.day-workday{
							border: 1px solid lighten( $baseColor, 40% );
							color : lighten( $baseColor, 40% );
						}

						&.isToday {
							@include use-flex;
							@include flex-align-center;
							right:4px;top:3px;
							width:27px;height:27px;
							border-radius: 30px;
							border: 4px dotted $redColor;
						}

					}

					//是否在当月
					&.outOfMonth {
						opacity : .3;
					}

				}


				//周末（周六，周日）
				 &:nth-child(6),&:nth-child(7){
					background-color : darken( $lightBaseColor, 2% );

					span.day-number{
						color: lighten( $baseColor , 45% );
					}

				}

				//每行（每周）最后一天
				&.lastDayInWeek {
					border-right:none;
				}
				

			}
			//最后一周（一行）
			&.lastWeek > li {
				border-bottom:none;
			}
		}

		.zhx-cal-layer{
			position:fixed;
			z-index:100;
			overflow:hidden;
			background-color : lighten( $lightBaseColor, 100% );
			color : $baseColor;
			font-size:.8em;
			border-radius: 5px;
			box-shadow: 0 0 10px darken( $lightBaseColor, 30% );
		}
	}

	.zhx-cal-mask{
		position: absolute;
		@include use-flex;
		@include flex-align-center;
		z-index:10;
		width:100%;
		height:100%;
		background: rgba( 255, 255, 255, 0.7 );
		@include frame-transition();
		
		&.outOfSign {
			opacity : 0
		}

		.spinner {
			width: 100px;
			height: 100px;
			position: relative;
			-webkit-animation: sk-rotate 2.0s infinite linear;
			animation: sk-rotate 2.0s infinite linear;

			>div {

				width: 50%;
				height: 50%;
				display: inline-block;
				position: absolute;
				border-radius: 100%;
				-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
				animation: sk-bounce 2.0s infinite ease-in-out;

				&.dot1{
				}
				&.dot2 {
					top: auto;
					bottom: 0;
					-webkit-animation-delay: -1.0s;
					animation-delay: -1.0s;
				}
				
			}
			
		}

		@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
		@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

		@-webkit-keyframes sk-bounce {
			0%, 100% { -webkit-transform: scale(0.0) }
			50% { -webkit-transform: scale(1.0) }
		}

		@keyframes sk-bounce {
			0%, 100% { 
				background: $lightBlueColor;
				transform: scale(0);
				-webkit-transform: scale(0);
			} 50% { 
				background: $greenColor;
				transform: scale(1.5);
				-webkit-transform: scale(1.5);
			}
		}

	}

}